<template>
    <div @click="userClick=false" v-if="DetailContent">
         <div class="part clear" >
            <p class="title"> 基本格子总数</p>
            <ul class="half-ss">
                <li class="half-content-ss">
                    <span class="txt-ss">基本格子总数：</span>
                    <span >{{DetailContent.backpack_count}}</span>
                </li >
                <li class="half-content-ss">
                    <span class="txt-ss">仓库总数：</span>
                    <span >{{DetailContent.warehouse_count}}</span>
                </li>

            </ul>
        </div>
         <div class="part clear" >
            <p class="title">已装备道具</p>
            <div class="highlight">
                <div class="highlight-item">满11段</div>
                <div class="highlight-item">金钟罗汉</div>
            </div>

            <ul class="half" v-for="(item,index) in DetailContent.wear" :key="item.id">
                <li class="half-content" >
                    <div class="pic" @click.stop="showorhide(1,index)"><img :src="imgUrl[item.name]" alt=""></div>
                    <div class="val">{{item.name}}</div>
                </li >
            </ul>
            
        </div>
        <div class="part clear" >
            <p class="title">未装备道具</p>
            <ul class="small" v-for="(item,index) in DetailContent.luggage" :key="item.id">
                <li class="small-content">
                    <div class="pic" @click.stop="showorhide(2,index)"><img :src="imgUrl[item.name]" alt=""></div>
                </li >
                

            </ul>
        </div>
        <div class="part clear" >
            <p class="title">仓库道具</p>
            <ul class="small" v-for="(item,index) in DetailContent.warehouse" :key="item.id">
                <li class="small-content">
                    <div class="pic" @click.stop="showorhide(3,index)"><img :src="imgUrl[item.name]" alt=""></div>
                </li >               
            </ul>        
        </div>
        <div class="part clear" >
            <p class="title">回收站装备（罗道人可找回）</p>
            <ul class="small" v-for="(item,index) in DetailContent.recycle" :key="item.id">
                <li class="small-content">
                    <div class="pic" @click.stop="showorhide(4,index)"><img :src="imgUrl[item.name]" alt=""></div>
                </li >
                
            </ul>       
        </div>
        <div class="all" v-show="ShowHidden">
            <div class="container outer-container"  @click.stop="" >
                <equip-content :List="DetailContent.wear" :type=type1 v-on:listenSwiper="change1"></equip-content>
            </div>   
        </div>
         <div class="all" v-show="ShowHidden2">
            <div class="container outer-container"  @click.stop="" >
                <equip-content :List="DetailContent.luggage" :type=type2 v-on:listenSwiper="change2"></equip-content>
            </div>   
        </div>   
        <div class="all" v-show="ShowHidden3">
            <div class="container outer-container"  @click.stop="" >
                <equip-content :List="DetailContent.warehouse" :type=type3 v-on:listenSwiper="change3"></equip-content>
            </div>   
        </div> 
        <div class="all" v-show="ShowHidden4">
            <div class="container outer-container"  @click.stop="" >
                <equip-content :List="DetailContent.recycle" :type=type4 v-on:listenSwiper="change4"></equip-content>
            </div>   
        </div>        
    </div>
</template>
<script>
import  EquipContent from '@/pages/detail/components/parts/beauty/EquipContent'
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
import Swiper from 'swiper'
export default {
  components: { EquipContent },
    data(){
        return{
            ShowHidden: false,
            ShowHidden2:false,
            ShowHidden3:false,
            ShowHidden4:false,
            DetailContent:{},
            imgUrl:Pictures.imgUrl,
            swipereven1:null,
            swipereven2:null,
            swipereven3:null,
            swipereven4:null,
            type1:"t1",
            type2:"t2",
            type3:"t3",
            type4:"t4",
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            },
    },
    mounted () {
        document.addEventListener('click', this.HiddenClick)
        var id =this.$route.query.id   
     axios.get("http://81.68.253.206:8081/page/getProp?id="+id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.DetailContent=res.data.data;
      }
    })
    },
    methods:{
        HiddenClick () {
        this.ShowHidden = false
        this.ShowHidden2 = false
        this.ShowHidden3 = false
        this.ShowHidden4 = false
        },
         change1(data){
            this.swipereven1=data;
        },
         change2(data){
            this.swipereven2=data;
        },
         change3(data){
            this.swipereven3=data;
        },
        change4(data){
            this.swipereven4=data;
        },
        showorhide(petindex,swipindex){
            if(petindex==1){
                this.ShowHidden = !this.ShowHidden;
                if(this.swipereven1){
                this.swipereven1.slideTo(swipindex,0,false)
                }
            }else  if(petindex==2){
                this.ShowHidden2 = !this.ShowHidden2;
                if(this.swipereven2){
                this.swipereven2.slideTo(swipindex,0,false)
                }
            }else  if(petindex==3){
                this.ShowHidden3 = !this.ShowHidden3;
                if(this.swipereven3){
                this.swipereven3.slideTo(swipindex,0,false)
                }
            }else  if(petindex==4){
                this.ShowHidden4 = !this.ShowHidden4;
                if(this.swipereven4){
                this.swipereven4.slideTo(swipindex,0,false)
                }
            }
          
        }
    }
}
    

</script>
<style lang="scss" scoped>
.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);
    span{
        font-size: rem(40);
    }

    .title{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);
    }
    .title::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
    .half{
        width: 100%;
        position: relative;
        .half-content{
            display: flex;
            width: 50%;
            float: left;
            height: rem(150);
            line-height: rem(150);
            font-size: rem(40);
            margin-top: rem(30);
            .pic{
                width: rem(150);
                height: rem(150);
                img{
                width: rem(150);
                height: rem(150);
                border: 1px solid #888;
                border-radius: rem(15);
                }

            }
            .val{
                flex: 1;
                padding: rem(20);
                line-height: rem(60);
                font-size: rem(35);
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-pack: start;
                -webkit-box-align: center;
                
                display: -moz-box;
                -moz-box-orient: horizontal;
                -moz-box-pack: start;
                -moz-box-align: center;
                
                display: -o-box;
                -o-box-orient: horizontal;
                -o-box-pack: start;
                -o-box-align: center;
                
                display: -ms-box;
                -ms-box-orient: horizontal;
                -ms-box-pack:start;
                -ms-box-align:center;
                
            }

        }                
    }
    .small{
        width: 100%;
        .small-content{
            float: left;
            width: rem(150);
            height: rem(150);
            margin: rem(30) rem(37) 0 0;
            .pic{
                position: relative;
                width: rem(150);
                height: rem(150);
                img{
                width: rem(140);
                height: rem(140);
                border: rem(2) solid #888;
                border-radius: rem(15);
                }
                .bd{
                    position: absolute;
                    top: rem(2);
                    left: rem(3);
                    width: rem(90);
                    height: rem(90);
                    background: url(../../../../assets/imgs/bd.png) no-repeat 50% 50%;
                    background-size: auto 100%;
                }
                .num{
                    position: absolute;
                    right: rem(5);
                    bottom: rem(5);
                    width: rem(50);
                    height: rem(40);
                    line-height: rem(40);
                    background-color:#e74e4b;
                    color: #fff;
                    font-size: rem(30);
                    text-align: center;
                    border-radius: rem(15) 0;
                }
            }
        }

    }
      

    
        
    
    }
    .highlight{
    width: 100%;
    height: rem(60);
    line-height: rem(60);
    .highlight-item{
        display: inline-block;
        padding: 0 rem(15);
        font-size: rem(35);
        color: #ee8381;
        border: 1px solid #f7c9c9;
        border-radius: rem(10);
        margin-right: rem(20);
    }
    }
.all{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 996;
        .container{
        width: 100%;
        min-width: 320px;
        max-width: 750px;
        height: 70%;
        position: fixed;
        bottom: 0;
        z-index: 999;
        opacity: 1;
        background-color:rgba(77,56,40,.97);
        overflow: auto;
            .swiper-container{
                width: 100%;
                .swiper-wrapper{
                    width: 100%;   
                     .swiper-slide{
                        width: 100%;
                        .preview{
                            display: flex;
                            width: 100%;
                            height: rem(230);
                            padding:rem(40) rem(20);
                            img{
                                width: rem(170);
                                height: rem(170);
                                background-color: #fff;
                                border-radius: rem(15);
                            }
                            .info{
                                flex: 1;
                                margin-left: rem(30);
                                .name{
                                    margin-top: rem(-10);
                                    font-family: 微软雅黑;
                                    font-size: rem(45);                           
                                    color: #6ddcf6;
                                }
                                .type,
                                .level{
                                    color: #fcf31c;
                                    font-size: rem(40);
                                }
                            }
                        }
                        .desc{
                            width: 100%;
                            height: auto;
                            padding:rem(40) rem(30);
                            h2{
                                color: #fcf31c;
                                font-weight: 400;
                                font-size: rem(40);
                                margin-top: rem(-20);
                            }
                            p{
                                margin-left: rem(40);
                                font-size: rem(40);
                                margin-top: rem(-30);
                                
                            }
                            .white{
                                    color: #fff;
                                }
                                .green{
                                    color: #51e414;
                                }
                                .blue{
                                    color: #6ddcf6;
                                }
                        }

                    }
            
                }
            .swiper-pagination{
                width: auto;
                height: rem(60);
                line-height: rem(60);
                right: rem(30);
                bottom: auto;
                left: auto;
                top: rem(30);
                padding: 0 rem(30);
                color: #fff;
                background: rgba(0,0,0,.5);
                border-radius: rem(30);
                font-size: rem(35);
            }

        }
    }
}
.half-ss{
        width: 100%;
        position: relative;
        .half-content-ss{
            width: 50%;
            float: left;
            height: rem(80);
            line-height: rem(80);
            font-size: rem(40);
            .txt-ss{
                color: #888;
            }

        }                
    }
.clear{clear:both;}
.outer-container{
 width: rem(200);
 height: rem(200);
 position: relative;
 overflow: hidden;
}
.inner-container{
 position: absolute;
 left: 0;
 top: 0;
 right: -17px;
 bottom: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
            width: 4px;    
            /*height: 4px;*/
        }
        .inner-container::-webkit-scrollbar-thumb {
            border-radius: 10px;
        
            background: rgba(0,0,0,0.2);
        }
        .inner-container::-webkit-scrollbar-track {
           
            border-radius: 0;
            background: rgba(0,0,0,0.1);

        }

</style>